<template>
    <ul class="Comlist wrapfix">
        <li v-for="dt in lists" :key="dt.goodsId">
            <a @click="goDetail(dt)">
                <div class="imgBox">
                    <Image v-if="dt.imageUrl" :url="dt.imageUrl"/>
                    <div class="status" v-if="type==0">
                        <template v-if="mt.diff(dt.auctionStartTime)>0">
                            <i class="iconfont icon-shijian"></i><b>预告</b>{{mt.dateFormat(dt.auctionStartTime)}}开始
                        </template>
                        <template v-else-if="mt.diff(dt.auctionStartTime)<0 && mt.diff(dt.auctionEndTime)>0">
                            <i class="iconfont icon-shijian"></i><b>进行中</b> {{mt.dateFormat(dt.auctionEndTime)}} 结束
                        </template>
                        <template v-else-if="mt.diff(dt.auctionEndTime)<0">
                            <b>拍卖结束</b>
                        </template>
                    </div>
                </div>
                <div class="txtBox">
                    <h3>{{dt.title}}</h3>
                    <p v-if="type==0" class="price">￥{{dt.auctionPrice?dt.auctionPrice.decimalTwoString:'--'}}</p>
                    <p v-else class="price">￥{{dt.marketPrice?dt.marketPrice.decimalTwoString:'--'}}</p>
                </div>
            </a>
        </li>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from './image.vue'
import {mt} from '@/utils/common.js'
export default {
    props:{
        lists:Array,
        type:Number
    },
    components:{
        Image
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        const goDetail = (item)=>{
            let url = `/detail/${item.goodsId}`
            if(item.auctionEndTime){ // 拍卖详情
                url = `/detail/${item.goodsId}?type=2`
            }
            router.push(url)
        }

        return{
            ...toRefs(state),
            mt,
            goDetail
        }
    }
}
</script>

<style lang="scss" scoped>
    .Comlist{
        list-style: none;
        padding: 0;
        margin: 0 -15px;
        li{
            float: left;
            width: 50%;
            padding: 30px 15px 0 15px;
            a{
                display: block;
                width: 100%;
                height: 445px;
                .imgBox{
                    position: relative;
                    z-index: 10;
                    height: 320px;
                    width: 100%;
                    .status{
                        display: flex;
                        position: absolute;
                        z-index: 10;
                        width: 100%;
                        height: 65px;
                        left:0;
                        bottom: 0;
                        background: rgba(214, 53, 53, 0.7);
                        align-items: center;  
                        font-size: 24px;
                        padding: 0 0 0 5px;
                        b{
                            padding: 0 10px 0 0 ;
                        }
                        i{
                            font-size: 26px;
                            padding: 2px 4px 0 0;
                        }
                    }
                }
                .txtBox{
                    height: 125px;
                    background: #0A4F4F;
                    h3{
                        width: 100%;
                        font-size: 28px;
                        font-weight: 500;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        padding: 20px 20px 0 20px;
                        line-height: normal;
                    }
                    .price{
                       font-size: 28px; 
                       font-weight: 500;
                       color: var(--baseColor);
                       padding: 10px 20px 0 20px;
                       line-height: normal;
                    }
                }
            }
        }
    }
</style>